<template>
	<GlobalBG title="目录查找调阅" :showHeader="true" :showBack="true">
		<view class="container-contents">
			<uni-easyinput class="searchInput" :inputBorder="false" v-model="keyword" placeholder="请输入关键词搜索">
				<template #right>
					<image class="searchImg"  src="/static/images/xgjd/search.png"></image>
				</template>
			</uni-easyinput>

			<view class="box">
				<view class="tab-container">
					<uni-segmented-control :current="current" :values="tabList" style-type="button"
						active-color="#2263BF" @clickItem="onClickItem" />
				</view>
				<view class="tree-content">
					<DaTree ref="DaTreeRef"  childrenField="childrens" :filterValue="keyword" :data="roomTreeData" labelField="nodeName" valueField="nodeId" showCheckbox 
						@change="handleTreeChange" </DaTree>
				</view>
			</view>
			<view class="fixedbtn" @click="gotoRoute">
				确认查看已选({{selectTrees.length}})
			</view>
		</view>
	</GlobalBG>
</template>

<script setup lang="ts">
import DaTree from "@/components/da-tree/index.vue";
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import api from "@/api/modules/videoAccess.ts";
let current = ref(0);
let tabList = ref(["场景目录", "组织目录"]);

// 切换
const onClickItem = (e) => {
  if (current.value != e.currentIndex) {
    current.value = e.currentIndex;
  }
  fetchList()
  console.log("切换tab", current.value);
};
let keyword = ref(null);
const DaTreeRef = ref();
// key的类型必须对应树数据key的类型
const defaultCheckedKeysValue = ref(["211", "222"]);
const defaultCheckedKeysValue2 = ref("222");
const roomTreeData = ref([
  {
    id: "2",
    name: "行政中心",
    children: [
      {
        id: "21",
        name: "行政部",
        children: [
          {
            id: "211",
            name: "行政一部",
            children: null,
          },
          {
            id: "212",
            name: "行政二部",
            children: [],
            disabled: true,
          },
        ],
      },
      {
        id: "22",
        name: "财务部",
        children: [
          {
            id: "221",
            name: "财务一部",
            children: [],
            disabled: true,
          },
          {
            id: "222",
            name: "财务二部",
            children: [],
          },
        ],
      },
      {
        id: "23",
        name: "人力资源部",
        children: [
          {
            id: "231",
            name: "人力一部",
            children: [],
          },
          {
            id: "232",
            name: "人力二部",
            append: "更多示例，请下载示例项目查看",
          },
        ],
      },
      {
        id: "23",
        name: "人力资源部1",
        children: [
          {
            id: "2311",
            name: "人力一部1",
            children: [],
          },
          {
            id: "2321",
            name: "人力二部1",
            append: "更多示例，请下载示例项目查看",
          },
        ],
      },
      {
        id: "233",
        name: "人力资源部12",
        children: [
          {
            id: "23112",
            name: "人力一部12",
            children: [],
          },
          {
            id: "23212",
            name: "人力二部12",
            append: "更多示例，请下载示例项目查看",
          },
        ],
      },
      {
        id: "22233",
        name: "人力资源部1222",
        children: [
          {
            id: "23112",
            name: "人力一部12",
            children: [],
          },
          {
            id: "23333212",
            name: "人力二部12",
            append: "更多示例，请下载示例项目查看",
          },
        ],
      },
      {
        id: "333",
        name: "人力资源部123322",
        children: [
          {
            id: "2333112",
            name: "人力一部132",
            children: [],
          },
          {
            id: "3",
            name: "人力二部12",
            append: "更多示例，请下载示例项目查看",
          },
        ],
      },
    ],
  },
]);
let selectTrees = ref([]);
function doExpandTree(keys, expand) {
  DaTreeRef.value?.setExpandedKeys(keys, expand);

  const gek = DaTreeRef.value?.getExpandedKeys();
  console.log("当前已展开的KEY ==>", gek);
}
function doCheckedTree(keys, checked) {
  DaTreeRef.value?.setCheckedKeys(keys, checked);

  const gek = DaTreeRef.value?.getCheckedKeys();
  console.log("当前已选中的KEY ==>", gek);
}
function handleTreeChange(allSelectedKeys, currentItem) {
  console.log("handleTreeChange ==>", allSelectedKeys, currentItem);
  selectTrees.value = DaTreeRef.value.getCheckedNodes();
}
function handleExpandChange(expand, currentItem) {
  console.log("handleExpandChange ==>", expand, currentItem);
}
const gotoRoute = async () => {
  try {
    console.log("gotoRoute ==>", selectTrees.value);


    // uni.navigateTo({ url: "/pages/video/component/videolist" });
  } catch (e) {
    console.error(e);
  }
};

//  获取接口数据
const fetchList = async () => {
  try {
    let data = {};
    if (current.value == 0) {
      const res = await api.getscenecameratree(data);
      console.log("场景数据", res);
      roomTreeData.value = res.data.treeNodeList;
    } else {
      const res = await api.getDevicecombox(data);
      console.log("点位数据:", res);
      roomTreeData.value = res.data.deviceOrgTree;
    }
  } catch (error) {
    console.error("获取列表数据", error);
  }
};
onLoad(() => {
  fetchList();
});
</script>

<style lang="scss">
/* 在页面的 style 或全局样式文件中 */
.searchInput ::v-deep .uni-easyinput__content {
  height: 87rpx !important;
  line-height: 87rpx !important;
  /* 保持文字垂直居中 */
  border-radius: 15rpx;
}

/* 如果图标位置偏移，调整右侧图标样式 */
.searchInput ::v-deep .uni-easyinput__icon-right {
  height: 87rpx;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  border-radius: 15rpx;
}

.container-contents {
  width: 100%;
  height: 100%;
  padding: 16rpx 28rpx;

  .searchImg {
    width: 54rpx;
    height: 54rpx;
    margin-right: 21rpx;
  }

  .tab-container {
    width: 346rpx;
    height: 54rpx;
    padding-left: 28rpx;

    .segmented-control--button {
      height: 54rpx;
    }
  }

  .box {
    height: calc(100% - 280rpx);
    margin-top: 19rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
    background: #fff;
    border-radius: 15rpx;
    overflow: auto;
    padding: 42rpx;

    .uni-collapse-item__title-box {
      padding: 0;
    }

    .content-collapse {
      padding: 20rpx 25rpx;
      background: rgba(228, 239, 253, 0.6);
      border-radius: 8rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 27rpx;
      color: #666666;
      line-height: 38rpx;

      .text {
        padding-bottom: 20rpx;
      }
    }

    .uni-forms {
      flex: 1;
      overflow: auto;

      .module {
        .uni-forms-item {
          padding-left: 0;
          padding-right: 0;

          .uni-input-placeholder {
            padding-right: 12rpx;
            text-align: right;
            font-size: 30rpx;
          }

          .uni-input-input {
            text-align: right;
          }

          uni-textarea {
            background: #fff !important;
          }
        }
      }

      .uni-forms-item {
        margin-bottom: 20rpx;
        padding: 20rpx;

        &.item-bg {
          background: #ffffff;
          box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 12, 39, 0.06);
          border-radius: 20rpx;
          padding: 30rpx 30rpx 100rpx 30rpx;

          :deep(.uni-forms-item__content) {
            position: static;
          }
        }

        .tip {
          font-size: 24rpx;
          color: #999;
          display: block;
          margin-top: 10rpx;
        }
      }

      .fault-type-picker {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10rpx 0;
        color: #666;
        font-size: 28rpx;
      }
    }
  }

  .tree-content {
    padding: 38rpx 28rpx;
  }

  .fixedbtn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 112rpx;
    background: #2263bf;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 31rpx;
    color: #ffffff;
    text-align: center;
    line-height: 112rpx;
  }
}
</style>